<template>
  <div class="bookshelf-box">
    <load :show="show" :overlay="overlay" />
    <pagehead />
    <van-search
      v-model="searchContent"
      shape="round"
      background="#F5F8FC"
      show-action
      readonly
      placeholder="搜一搜"
      left-icon
      @focus="handleToSearch"
    >
      <template #action>
        <van-button round @click="handleToHistory" icon="clock-o" type="primary" size="small" />
      </template>
    </van-search>
    <div class="bookshelf-report" @click="handleToReadReport" v-if="report">
      <img src="http://foglake.sanye666.top/images/read-report.png" />
    </div>
    <div class="bookshelf-content">
      <div class="bookshelf-timecount">
        <div class="timecount-top">
          <div class="top-title">
            <div>您的</div>
            <div>本周阅读时间</div>
          </div>
          <van-icon name="more-o" />
        </div>
        <div class="timecount-bottom">
          <div>Min</div>
          <div>
            <span>{{readTime}}</span>
            <!-- <countup :end="readTime" /> -->
            <span>/分钟</span>
          </div>
        </div>
      </div>
      <transition name="van-fade" v-if="bookshelfList.length > 0">
        <van-row v-show="bookshelfShow" type="flex" justify="start">
          <van-col v-for="item in bookshelfList" :key="item.id" span="8">
            <shelf-card
              :name="item.name"
              :is_over="item.is_over"
              :percentage="item.percentage"
              :id="item.id"
              :chapter_id="item.chapter_id"
              :image="item.image"
            />
          </van-col>
        </van-row>
      </transition>
      <div v-else>
        <div style="font-size:14px;text-align:center;margin-bottom:10px">您还未添加任何书籍</div>
        <van-button type="primary" block color="#92C8FF" @click="handleToLibrary">去书城添加</van-button>
      </div>
      <!-- <page-tabbar tabbarActive="bookshelf" :placeholder="true" /> -->
    </div>
  </div>
</template>

<script>
import Taro from "@tarojs/taro";
import Pagehead from "@components/Pagehead";
import PageTabbar from "@components/PageTabbar";
import ShelfCard from "@components/ShelfCard";
import Load from "@components/Load";
import Countup from "@components/Countup";
export default {
  name: "Bookshelf",
  components: { Pagehead, PageTabbar, ShelfCard, Load, Countup },
  data() {
    return {
      searchContent: "",
      bookshelfShow: true,
      bookshelfList: [],
      readTime: 0,
      show: true,
      overlay: true,
      report: false,
    };
  },
  //   created(){
  //       this.handleGetBookShelf();
  //   },
  created() {
    this.handleGetBookShelf();
    this.handleGetReadTime();
    let myDate = new Date("2020-8-1");
    if (myDate.getDay() === 0) {
      this.report = true;
    } else {
      this.report = true;
    }
  },
  methods: {
    handleGetBookShelf() {
      try {
        this.show = true;
        let bookShelf = Taro.getStorageSync("bookShelf");
        let _bookshelfList = [];
        if (bookShelf) {
          let _bookShelf = JSON.parse(bookShelf);
          if (Object.keys(_bookShelf).length > 0) {
            for (const key in _bookShelf) {
              let percentage =
                (parseInt(_bookShelf[key].index) /
                  parseInt(_bookShelf[key].chapterCount)) *
                100;
              percentage = percentage.toFixed(2);
              _bookShelf[key].percentage = `${percentage}%`;
              _bookshelfList.push(_bookShelf[key]);
            }
          }
          this.bookshelfList = _bookshelfList;
        }
        setTimeout(() => {
          this.show = false;
        }, 500);
      } catch (e) {
        console.log(e);
      }
    },
    handleGetReadTime() {
      let timeList = Taro.getStorageSync("timeList");
      if (timeList) {
        let _timeList = JSON.parse(timeList);
        if (Object.keys(_timeList).length > 0) {
          let readTime = 0;
          for (const key in _timeList) {
            readTime += parseInt(_timeList[key].readTime);
          }
          this.readTime = Math.floor(readTime / 60);
        }
      }
    },
    // 搜索页
    handleToSearch() {
      Taro.navigateTo({
        url: "/pages/search/search",
      });
    },
    // 阅历页
    handleToHistory() {
      Taro.navigateTo({
        url: "/pages/history/history",
      });
    },
    handleToReadReport() {
      Taro.navigateTo({
        url: "/pages/readreport/readreport",
      });
    },
    handleToLibrary() {
      Taro.navigateTo({
        url: "/pages/library/library",
      });
    },
  },
};
</script>

<style scoped>
.bookshelf-box {
  background: rgba(245, 248, 252, 1);
  min-height: 100vh;
}
.bookshelf-content {
  margin: 0 40px;
  padding: 36px 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 12px;
  margin-top: 20px;
}
.bookshelf-report {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin: 20px 40px;
  border-radius: 12px;
}
.bookshelf-report img {
  width: 100%;
  border-radius: 12px;
}
.bookshelf-timecount {
  border-bottom: 1px solid rgba(6, 27, 65, 0.08);
  padding-bottom: 28px;
  margin-bottom: 40px;
}
.timecount-top {
  font-size: 30px;
  font-family: Alibaba PuHuiTi;
  font-weight: 600;
  color: rgba(6, 27, 65, 0.75);
  margin-bottom: 46px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.timecount-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.timecount-bottom div:first-child {
  font-size: 18px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: rgba(6, 27, 65, 0.75);
}

.timecount-bottom div:last-child {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: rgba(6, 27, 65, 0.75);
  display: flex;
  align-items: center;
}

.timecount-bottom div:last-child span:first-child {
  font-size: 36px;
  line-height: 36px;
}

.timecount-bottom div:last-child span:last-child {
  font-size: 18px;
}

.bookshelf-box .van-overlay {
  z-index: 10;
}
</style>